<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.searchSTARTWITH_type" placeholder="类型" style="width: 200px;" class="filter-item" />
      <el-input v-model="listQuery.searchSTARTWITH_name" placeholder="名称" style="width: 200px;" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="fetchData()"/>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="create()">新增根节点</el-button>
    </div>
    <tree-table :data="data" :eval-func="func" :columns="columns" :expand-all="expandAll" border>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status=='0'?'success':'info'">{{ scope.row.status=="0"?"启用":"停用" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" @click="create(scope.row)">添加子字典</el-button>
        </template>
      </el-table-column>
    </tree-table>
    <el-pagination
      :current-page.sync="page.current"
      :page-size="page.size"
      :total="page.total"
      layout="prev, pager, next, jumper"
      @current-change="fetchData"/>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="editTitle"
      width="50%">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="父节点">
              <el-input :disabled="true" v-text="form.parent?form.parent.name:null" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="字典名称" prop="name">
              <el-input v-model="form.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字典值" prop="value">
              <el-input v-model="form.value"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="字典类型" prop="type">
              <el-input v-model="form.type" :disabled="form.parent?true:false"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型描述" prop="typeName">
              <el-input v-model="form.typeName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input v-model="form.remark"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="顺序">
              <el-input v-model="form.seq"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-switch
                v-model="form.status"
                active-color="#67C23A"
                inactive-color="#909399"
                active-text="启用"
                inactive-text="停用"
                active-value="0"
                inactive-value="1">
                >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="save('form')">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>

</template>

<script>
import { getList, save as _save, update as _update } from '@/api/dict'
import treeTable from '@/components/TreeTable'
import treeToArray from './customEval'

export default {
  components: { treeTable },
  filters: {
  },
  data() {
    return {
      func: treeToArray,
      expandAll: false,
      columns: [
        {
          text: 'ID',
          value: 'id',
          width: 200
        },
        {
          text: '类型',
          value: 'type'
        },
        {
          text: '名称',
          value: 'name'
        },
        {
          text: '字典值',
          value: 'value'
        }
      ],
      data: [],
      list: null,
      listLoading: true,
      listQuery: { searchISNL_parent: 0 },
      dialogVisible: false,
      editTitle: '新增字典',
      initForm: { status: '0',
        name: null },
      form: { status: '0',
        name: null },
      rules: {
        name: [
          { required: true, message: '请输入字典名称', trigger: 'blur' },
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '请输入字典值', trigger: 'blur' },
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入类型', trigger: 'blur' },
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ],
        typeName: [
          { required: true, message: '请输入类型描述', trigger: 'blur' },
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ]
      },
      page: {
        current: 1,
        size: 10,
        total: 10

      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.listQuery.page = this.page.current - 1
      this.listQuery.size = this.page.size
      getList(this.listQuery).then(response => {
        this.data = response.data.content
        this.page.total = response.data.totalElements
        this.listLoading = false
      })
    },
    message(row) {
      this.$message.info(row.name)
    },
    create(parent) {
      /** 初始化数据*/
      this.form = this.initForm
      this.form.parent = parent
      this.form.type = parent.type
      this.form.typeName = parent.typeName
      this.dialogVisible = true
    },
    /** 编辑*/
    edit(data) {
      this.dialogVisible = true
      this.form = data
      this.form.children = null
      if (this.form.parent) {
        this.form.parent.children = null
      }
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            _update(this.form.id, this.form).then(responseData => {
              if (responseData && responseData.code && responseData.code === 200) {
                this.$message.info('保存成功')
                this.dialogVisible = false
                this.fetchData()
              } else {
                this.$message.error('保存失败:' + responseData.message)
              }
            })
          } else {
            _save(this.form).then(responseData => {
              if (responseData && responseData.code && responseData.code === 200) {
                this.$message.info('保存成功')
                this.dialogVisible = false
                this.fetchData()
              } else {
                this.$message.error('保存失败:' + responseData.message)
              }
            })
          }
          return false
        } else {
          return false
        }
      })
    }
  }
}
</script>
